import React, { memo, useState } from "react"
import { Layout } from "antd"
import { Outlet } from "react-router-dom"
import MainMenu from "@/components/MainMenu"
import MainHeader from "@/components/MainHeader"
import MainFooter from "@/components/MainFooter"
import styles from "./index.module.scss"

const { Content, Sider } = Layout

const Home: React.FC = () => {
    const [collapsed, setCollapsed] = useState(false)

    return (
        <Layout style={{ height: "100vh" }}>
            <Sider collapsible collapsed={collapsed} onCollapse={value => setCollapsed(value)}>
                <MainMenu collapsed={collapsed} />
            </Sider>
            <Layout>
                <MainHeader />
                <Content className={styles["content-wrapper"]}>
                    <div className={styles.content}>
                        {/* 内容 */}
                        <Outlet />
                    </div>
                    <MainFooter />
                </Content>
            </Layout>
        </Layout>
    )
}

export default memo(Home)
